<template>
    <div class="home-container">
        <el-tabs v-model="activeName" class="tabs-wrap">
            <el-tab-pane v-for="(item, index) in tabs" :key="index" :label="item.title" :name="item.name" />
        </el-tabs>
        <component :is="activeName" />
    </div>
</template>

<script>
import BoardComponent from './components/main/board.vue';
import HouseComponent from './components/main/house.vue';
import BussinessComponent from './components/main/bussiness.vue';
import CarportComponent from './components/main/carport.vue';
import ManageComponent from './components/main/manage.vue';
//import { getData } from '@/api/DashBoardApi';

export default {
    components: { BoardComponent, HouseComponent, BussinessComponent, CarportComponent, ManageComponent },
    data() {
        return {
            activeName: 'BoardComponent',
            tabs: [
                {
                    title: '经营看板',
                    name: 'BoardComponent'
                },
                {
                    title: '公寓',
                    name: 'HouseComponent'
                },
                {
                    title: '商业',
                    name: 'BussinessComponent'
                },
                {
                    title: '车位',
                    name: 'CarportComponent'
                }
                // ,
                // {
                //     title: '多种经营',
                //     name: 'ManageComponent'
                // }
            ]
        };
    },
    mounted() {
        this.loadData();
    },
    methods: {
        loadData() {
            // getData()
            //     .then((res) => {
            //         console.log(res);
            //     })
            //     .catch((error) => {
            //         console.error(error);
            //     });
        }
    }
};
</script>

<style lang="scss" scoped>
.home-container {
    height: 100vh;
    overflow: hidden;
    padding: 12px 20px;
    background: #f7f8fa;
    .tabs-wrap {
        background: #fff;
        padding-left: 20px;
        border-radius: 10px;
    }
}
</style>
